<template>
  <div class="h100">
    <div class="home-bac">
      <img src="~@/assets/reception/background1.png" alt="" >
    </div>
    <div class="home-main">
      <!-- <div class="functional-module">
        <img src="~@/assets/reception/home/advice.png" alt="">
        <img src="~@/assets/reception/home/joinMember.png" alt="">
        <img src="~@/assets/reception/home/inquiry.png" alt="">
        <img src="~@/assets/reception/home/Login&Reg.png" alt="">
      </div> -->
      <div class="cases">
        <span class="cases-title">
          <span>成功案例</span>
          <span class="cases-more" @click="routerpush()">更多>></span>
        </span>
        <div class="cases-main">
          <div class="cases-main-item" v-for="(item,index) in casesList" :key="index" @click="routerpush(item.ID)">
            <img :src="upload + item.Imgs" alt="">
          </div>
          <!-- <img src="~@/assets/reception/cases/casesbac.png" alt=""> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@/router/index';
import { getAppGetXMALListApi } from '@/api/resService'

export default {
  name: 'cases',
  data () {
    return {
      flipped:false,
      casesList:[],
      casesItemID:'',
      upload:process.env.VUE_APP_API_BASE_URL,
    }
  },
  methods: {
    routerpush(id){
      // if (!id) {
        this.$router.push({ path: '/reception/cases/detail' });
      // }else{

      // }
    },
    getAppGetXMALList(){
      getAppGetXMALListApi(
        {
          pageSize:10,
          pageIndex:1,
          RMTJ:1,
        }
      ).then((res) => {
        console.log('res',res);
        this.casesList = res.data
      })
      .catch((err) => {
      })
      .finally(() => {
      })
    },
  },
  mounted() {
    this.getAppGetXMALList()
  },
}
</script>

<style lang="less" scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 10px; /* 垂直滚动条宽度 */
}
 
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道颜色 */
}
 
::-webkit-scrollbar-thumb {
  background: #cac7c7; /* 滚动条滑块颜色 */
  border-radius:10px ;
  height: 20px;
}
 
::-webkit-scrollbar-thumb:hover {
  background: #818181; /* 滚动条滑块hover颜色 */
}

.home-bac{
  img{
    height: 230px;
    width: 100%;
  }
}
.home-main{
  margin-top:30px ;
  .functional-module{
    width: 130px;
    margin-top:10px ;
    display: flex;
    flex-direction:column;
    position: fixed;
    top: 310px;
    left: 10px;
    img{
      margin: 5px 0;
      height: 95px;
      cursor: pointer;
    }
  }
  .cases{
    margin: 0 auto;
    height: 380px;
    width: 1600px;
    .cases-main{
      height: 100%;
      // padding-right:10px ;
      overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      // overflow:hidden;
      .cases-main-item{
        width: 30%;
        margin: 10px 20px;
        cursor: pointer;
        img{
          width: 100%;
          height: 300px;
        }
      }
    }
    // .cases-main:hover{
    //   height: 100%;
    //   overflow-y: scroll;
    //   img{
    //     width: 100%;
    //   }
    // }
    .cases-title{
      color: #1e50ae;
      font-size:24px ;
      width: 100%;
      width: 100%;
      border-bottom: 2px solid #1e50ae;
      display: flex;
      justify-content: space-between;
      .cases-more{
        font-size: 16px;
        color: #000;
        cursor: pointer;
      }
    }
  }
}
</style>